<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- 文本 -->
    <div id="app">
         <input v-model="message" placeholder="edit me">
          <p>message is :{{message}}</p>
          <!-- 多行文本 -->
          <span>多行文本的内容是:</span>
          <p style="white-space: pre-line;">{{message1}}</p>
          <textarea v-model="message1" placeholder="add multiple lines"></textarea>
          <!-- 复选框 -->
          <input type="checkbox" v-model="checked">
          <label for="checkbox">{{checked}}</label>
          <!-- 单选按钮 -->
          <br>
          <input type="radio" value="one" v-model="picked">
          <label for="one">One</label>
          <br>
          <input type="radio" value="two" v-model="picked">
          <label for="two">two</label>
          <br>
          <span>picked:{{picked}}</span>
          <br>
          <!-- 选择框 单选时 -->
          <select v-model="selected">
              <option disabled value="">请选择</option>
              <option >A</option>
              <option >B</option>
              <option >C</option>
          </select>
          <span>selectd:{{selected}}</span>
          <br>
          <!-- 用v-for渲染的动态选项 -->
          <select v-model="slected1">
              <option v-for="option in options" v-bingd:value="option.value">
                  {{option.text}}
              </option>
          </select>
          <span>Selected: {{ slected1 }}</span>

     </div>

    <script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            message:"",
            message1:"",
            checked:false,
            picked:"",
            selected:"",
            slected1:"",
            options:[
                {text:'2',value:'A'},
                {text:'3',value:'B'},
                {text:'4',value:'C'},
            ]
        }
    })
    </script>
    
</body>
</html>